<template lang="html">
  <div class="app">
    <top-header/>
    <div class="w1200 park">
      <div class="bar">
        <div class="select-city">
          选择城市：
          <ul class="inline ver-middle">
            <li
            v-for='(item,index) in listCity'
            :class='{active:index==num}'
            @click='addClass1(index)'>{{item.name}}</li>
          </ul>
          <div class="bar-more inline" v-if='listCity.length>14'>
            更多 <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="park-list">
        <ul>
          <li v-for='(item,index) in listPark'>
            <router-link :to='{name:"parkDetail",params: { id: item.json_data.article_id }}'>
              <img v-lazy='item.json_data.park_img' alt="">
              <div class="font">
                <div class="name">
                  {{item.json_data.name}}
                </div>
                <div class="pos ellipsis">
                  <i class="icon icon-addr ver-middle"></i>{{item.json_data.pos}}
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <bot-footer/>
  </div>
</template>

<script>
import header from '../header/header.vue'
import footer from '../footer/footer.vue'
import {mapState} from 'vuex'
export default {
  data(){
    return{
      num:0
    }
  },
  computed:mapState([
    'listCity','listPark'
  ]),
  methods:{
    addClass1(index){
      this.num=index
    }
  },
  mounted(){
    document.title = '解忧工场-工场',
    this.$store.dispatch('load_city_list'),
    this.$store.dispatch('load_park_list')
  },
  components:{
    'top-header':header,
    'bot-footer':footer
  }
}
</script>

<style lang="less" scoped>
@import "park.less";
</style>
